import React from 'react';
import {Icon,Row,Col,Tooltip,message} from 'antd';
const { Component } = React
import styles from './CollapsiblePanels.less'
import classnames from 'classnames/bind'
let cx = classnames.bind(styles);
import $ from 'jquery'
import { has } from 'lodash'
import CopyToClipboard from 'react-copy-to-clipboard';

export default class extends Component {
  // 构造函数
  constructor(props, context) {
    super(props, context);
    this.state = {
      collapse:true,
      showModal:false
    }
  }

  componentWillUpdate(nextProps, nextState) {
  }

  componentDidUpdate(prevProps, prevState) {
  }

  componentWillReceiveProps(nextProps) {
  }

  componentDidMount() {
  }

  // 面板展开、折叠
  changeStatus() {
    this.setState({ collapse:!this.state.collapse })
  }
  //点击图标弹窗
  showModal(){
    this.props.showModal(!this.state.showModal)
  }

  render() {
  
    let hasHideUpDownBtn = has(this.props, 'hideUpDownBtn', false)
    let hasActionBtn = has(this.props, 'actionBtn', false)

    //复制小程序链接
   function copyUrl(e){
    e.preventDefault();
  }
   function onCopy(url){
    //  console.log(url)
     if(url.length){
      message.success('复制成功')
     }else{
      message.err('复制失败')
     }
   }
    return (
      <div style={{marginTop:16, ...this.props.style}} className={this.props.className}>
        { /* 面板头部 */ }
        <dl className={cx(styles.dlMain, 'dropdownShadow')}>
              <dt className={cx(!this.state.collapse ? 'slideHide' : '','clearfix')} style={ this.props.titleBarStyle }>
                <Row type={'flex'} justify={'space-between'} align={'middle'}>
                  <Col span={8}>{ this.props.title }
                {
                  this.props.clipboard && this.props.clipboard.isShow && (
                    <CopyToClipboard text={this.props.clipboard.url} onCopy={(e) => onCopy(e)}>
                      <span style={{
                        marginLeft: "30px", fontFamily: "Microsoft Yahei",
                        fontSize: "12px",
                        fontWeight: "normal"
                      }}>
                      
                        <span className={cx(styles.aSpan)} href=' ' onClick={e => copyUrl(e)}>{this.props.clipboard.title}</span>
                        <Tooltip title={
                          <div>
                            {this.props.clipboard.tips}
                          </div>
                        }><Icon type="question-circle" style={{ fontSize: '16px', color: '#08c', marginLeft: '10px', }} /></Tooltip>
                      </span>
                    </CopyToClipboard>
                  )
                }

                {this.props.tooltip&&
                (
                  <span style={{fontWeight:'100',fontSize:'13px'}}>
                    <Icon onClick={() => this.showModal()}  type="question-circle" style={{ fontSize: '16px', color: '#08c', marginLeft: '10px',marginRight:'10px' }} />
                    {this.props.tooltip}
                    </span>
                )}
                  </Col>
                  <Col span={7}>{this.props.auditStatus}</Col>
                  <Col span={7}>{this.props.sTitle}</Col>
                  <Col span={2}>
                    {
                      hasHideUpDownBtn && (
                        <span className={cx('expandIcon')} onClick={() => this.changeStatus()} > { this.state.collapse? '收起': '展开' }
                          <Icon type="up" style={{marginLeft:'2px'}}/>
                    </span>
                      )
                    }
                    {
                      hasActionBtn && <span  className={cx('expandIcon','action')}>修改</span>
                    }
                  </Col>
                </Row>
              </dt>

        { /* 面板内容 */ }
          <dd className={`${!this.state.collapse ? 'slideHide' : ''}`}>
            <div style={{padding: '16px'}}>
              {this.props.children}
            </div>
          </dd>

        </dl>
      </div>
    )
  }
}
